<template>
  <div class="p-6">
    <h1 class="text-3xl font-bold mb-6 text-gray-800">健康数据管理</h1>
    
    <!-- 数据录入表单 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
      <h2 class="text-xl font-semibold mb-4 text-gray-800">录入健康数据</h2>
      
      <el-form :model="healthForm" label-width="120px" class="max-w-2xl">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="收缩压">
              <el-input v-model="healthForm.systolic" placeholder="mmHg">
                <template #append>mmHg</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="舒张压">
              <el-input v-model="healthForm.diastolic" placeholder="mmHg">
                <template #append>mmHg</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="心率">
              <el-input v-model="healthForm.heartRate" placeholder="次/分钟">
                <template #append>BPM</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="体重">
              <el-input v-model="healthForm.weight" placeholder="kg">
                <template #append>kg</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="血氧饱和度">
              <el-input v-model="healthForm.oxygenSaturation" placeholder="%">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="步数">
              <el-input v-model="healthForm.steps" placeholder="步">
                <template #append>步</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item>
          <el-button type="primary" @click="submitHealthData">保存数据</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 历史数据表格 -->
    <div class="bg-white rounded-lg shadow-md p-6">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-semibold text-gray-800">历史数据记录</h2>
        <div class="flex space-x-2">
          <el-button type="primary" size="small" @click="exportData('json')">导出JSON</el-button>
          <el-button type="success" size="small" @click="exportData('csv')">导出CSV</el-button>
        </div>
      </div>
      
      <el-table :data="healthHistory" style="width: 100%">
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="systolic" label="收缩压" width="100" />
        <el-table-column prop="diastolic" label="舒张压" width="100" />
        <el-table-column prop="heartRate" label="心率" width="100" />
        <el-table-column prop="weight" label="体重" width="100" />
        <el-table-column prop="oxygenSaturation" label="血氧" width="100" />
        <el-table-column prop="steps" label="步数" width="100" />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="viewDetails(row)">详情</el-button>
            <el-button type="text" size="small" @click="deleteRecord(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="mt-4 flex justify-center">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="10"
          :total="50"
          layout="prev, pager, next"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { exportHealthData } from '../utils/exportData'

const healthForm = ref({
  systolic: '',
  diastolic: '',
  heartRate: '',
  weight: '',
  oxygenSaturation: '',
  steps: ''
})

const healthHistory = ref([
  {
    date: '2025-01-15',
    systolic: 120,
    diastolic: 80,
    heartRate: 72,
    weight: 65.5,
    oxygenSaturation: 98,
    steps: 8500
  },
  {
    date: '2025-01-14',
    systolic: 118,
    diastolic: 78,
    heartRate: 70,
    weight: 65.3,
    oxygenSaturation: 97,
    steps: 9200
  }
])

const currentPage = ref(1)

const submitHealthData = () => {
  console.log('提交健康数据:', healthForm.value)
  // 这里添加提交逻辑
  ElMessage.success('健康数据保存成功！')
  resetForm()
}

const resetForm = () => {
  healthForm.value = {
    systolic: '',
    diastolic: '',
    heartRate: '',
    weight: '',
    oxygenSaturation: '',
    steps: ''
  }
}

const viewDetails = (row) => {
  console.log('查看详情:', row)
}

const deleteRecord = (row) => {
  const index = healthHistory.value.findIndex(item => item.date === row.date)
  if (index !== -1) {
    healthHistory.value.splice(index, 1)
    ElMessage.success('记录已删除')
  }
}

const exportData = (type) => {
  try {
    exportHealthData(type, healthHistory.value)
    ElMessage.success(`数据已导出为 ${type.toUpperCase()} 格式`)
  } catch (error) {
    ElMessage.error('数据导出失败')
    console.error('导出错误:', error)
  }
}
</script>